<template>
  <div class="order-container">
    <el-card>
      <el-tabs v-model="activeName"
               @tab-click="handleClick">
        <el-tab-pane label="全部"
                     name="1"></el-tab-pane>
        <el-tab-pane label="待付款"
                     name="2"></el-tab-pane>
        <el-tab-pane label="待接单"
                     name="3"></el-tab-pane>
        <el-tab-pane label="待发货"
                     name="4"></el-tab-pane>
        <el-tab-pane label="已发货"
                     name="5"></el-tab-pane>
        <el-tab-pane label="已完成"
                     name="6"></el-tab-pane>
        <el-tab-pane label="已取消"
                     name="7"></el-tab-pane>
      </el-tabs>
      <el-form :inline="true"
               ref="search_data"
               class="demo-form-inline">
        <el-row>
          <el-form-item label="订单编号">
            <el-input v-model="search_data.keyword"
                      placeholder="输入分组名称" />
          </el-form-item>

          <el-form-item label="订单状态">
            <el-select v-model="search_data.status"
                       placeholder="请选择">
              <el-option v-for="item in status_arr"
                         :key="item.value"
                         :label="item.title"
                         :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary"
                       @click="onSearch">查询</el-button>
          </el-form-item>
        </el-row>
      </el-form>
    </el-card>

    <el-card style="margin-top:10px">
      <div class="item"
           style="background:#f4f4f4">
        <div class="item-content">
          <div class="dingdan">订单</div>
          <div class="danjia">单价/数量</div>
          <div class="zongjia">实收款</div>
          <div class="maijia">收货人</div>
          <div class="zhuangtai ">状态</div>
        </div>
      </div>

      <el-empty v-if="table_data.length==0"
                description="暂无数据"></el-empty>
      <div class="item"
           v-else
           v-for="item in table_data">
        <div class="item-header">
          编号:{{item.order_num}}<span style="margin-left:40px">下单时间:{{item.created_at}}</span>
        </div>
        <div class="item-content">
          <div class="dingdan">
            <div v-for="item1 in item.with_item"
                 class="dingdan-content">
              <el-avatar shape="square"
                         :size="60"
                         :src="item1.with_product_norm.head"></el-avatar>
              <div style="padding-left:20px">
                <div>{{item1.with_product.title}}</div>
                <div style="margin-top:10px;color:#999">{{item1.with_product_norm.title}}</div>
              </div>
            </div>
          </div>
          <div class="danjia">
            <div v-for="item1 in item.with_item">
              <div>{{item1.with_product_norm.price}}</div>
              <div style="margin-top:10px">x{{item1.num}}</div>
            </div>
          </div>
          <div class="zongjia">
            <div style="color:red">￥{{item.actual_price}}</div>
            <div style="margin-top:10px">总价：￥{{item.order_price}}</div>
            <div style="margin-top:10px">优惠：-￥{{item.coupon_price}}</div>
          </div>
          <div class="maijia">
            <div>{{item.with_address.name}} {{item.with_address.phone}}</div>
            <div style="margin-top:10px">{{item.with_address.address}}</div>
          </div>
          <div class="zhuangtai">
            <div v-if="item.status==-99">超时未付款</div>
            <div v-else-if="item.status==1">未支付</div>
            <div v-else-if="item.status==2">待接单</div>
            <div v-else-if="item.status==3">待发货</div>
            <div v-else-if="item.status==4">待收货</div>
            <div v-else-if="item.status==5">已完成</div>
            <div v-else>未知</div>
            <div style="margin-top:10px"><el-link type="primary"
                       @click="goRead(item.id)">详情</el-link></div>
            <div style="margin-top:10px">
              <el-button size="mini"
                         type="primary"
                         v-if="item.status==2">接单</el-button>
              <el-button size="mini"
                         type="primary"
                         v-if="item.status==3">发货</el-button>
            </div>
          </div>
        </div>
      </div>
    </el-card>
    <div style="padding: 10px 0; text-align: right">
      <el-pagination background
                     :page-size="10"
                     layout="total, prev, pager, next"
                     :total="all_count"
                     @current-change="pageChange" />
    </div>
  </div>
</template>

<script>
import { getList } from '@/api/order'

export default {
  data () {
    return {

      activeName: '1',
      search_data: {
        page: 1,
        limit: 15,
        keyword: '',
        status: null
      },
      status_arr: [
        {
          "title": "待支付",
          "status": 1
        },
        {
          "title": "待接单",
          "status": 2
        },
        {
          "title": "待配送",
          "status": 3
        },
        {
          "title": "待确认",
          "status": 4
        },
        {
          "title": "已完成",
          "status": 5
        },
        {
          "title": "售后",
          "status": -1
        },
        {
          "title": "用户取消",
          "status": -2
        },
        {
          "title": "系统关闭",
          "status": -3
        },
      ],
      all_count: 0,
      table_data: [],
      multiple_selection: [],
    }
  },
  created () {
    this.fetchData()
  },
  methods: {
    // 接单
    handleReceiveOrder (id) { },
    handleClick (tab, event) {
      console.log(this.activeName);
    },
    onSearch () { },
    fetchData () {
      getList().then(response => {
        this.table_data = response.data.data
        this.all_count = response.data.count
      })
    },
    goRead (id) {
      this.$router.push("/order/detail?id=" + id);
    },

    pageChange (val) {
      this.search_data.page = val;
      this.fetchData();
    },
  }
}
</script>
<style lang="scss" scoped>
.order-container {
  color: #333;
  margin: 0 auto;
  padding: 30px;
  .main-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .item {
    background: #fff;
    width: 100%;
    .item-header {
      padding: 20px;
      background-color: #f4f4f4;
      color: #444;
    }
    .item-content {
      padding: 20px;
      width: 100%;
      display: flex;
      .dingdan {
        flex: 1;
        .dingdan-content {
          display: flex;
        }
      }
      .danjia {
        flex: 1;
      }
      .zongjia {
        flex: 1;
      }
      .maijia {
        flex: 1;
      }
      .zhuangtai {
        text-align: center;
        width: 200px;
      }
    }
  }
}
</style>
